<!--填报课程考核实施计划-->
<template>
  <div>
    <div>
      <el-form label-suffix="：" label-position="left" style="display: flex; margin-bottom: -20px;">
        <el-form-item v-if="roleId !== '1476444221949898754'" label-width="55px" label="年级">
          <el-select v-model="queryParams.grade" size="mini" clearable placeholder="请选择年级" style="margin: 0 20px 0 -15px;" @change="handleChangeGrade">
            <el-option v-for="(item, index) in gradeList" :key="index" :label="item.xqszxn" :value="item.xqszxn" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="55px" label="学期">
          <el-select v-model="queryParams.termid" size="mini" clearable placeholder="请选择学期" style="margin: 0 20px 0 -15px;">
            <el-option v-for="(item, index) in semesterList" :key="index" :label="item.xqmc" :value="item.xqmc" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="110px" label="课程负责单位">
          <el-input v-model="queryParams.unit" size="mini" clearable placeholder="请输入课程负责单位" style="margin: 0 20px 0 -15px;" />
        </el-form-item>
        <el-form-item v-if="roleId !== '1476444221949898754'" label-width="85px" label="培养层次">
          <el-select v-model="queryParams.designcontent" size="mini" clearable placeholder="请选择培养层次" style="margin: 0 20px 0 -15px;">
            <el-option v-for="(item, index) in levelList" :key="index" :label="item.dictValue" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="roleId !== '1476444221949898754'" label-width="85px" label="专业班次">
          <el-select v-model="queryParams.class" size="mini" clearable placeholder="请选择专业班次" style="margin: 0 20px 0 -15px;">
            <el-option v-for="(item, index) in classList" :key="index" :value="item.id" :label="item.className" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="85px" label="修习类型">
          <el-select v-model="queryParams.studytype" size="mini" clearable placeholder="请选择修习类型" style="margin: 0 20px 0 -15px;">
            <el-option v-for="(item, index) in studyList" :key="index" :value="item.dictKey" :label="item.dictValue" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="85px" label="课程名称">
          <el-input v-model="queryParams.coursename" size="mini" clearable placeholder="请输入课程名称" style="margin: 0 20px 0 -15px;" />
        </el-form-item>
        <el-form-item v-if="roleId !== '1476444221949898754'" label-width="85px" label="教员名称">
          <el-input v-model="queryParams.teachername" size="mini" clearable placeholder="请输入教员名称" style="margin: 0 20px 0 -15px;" />
        </el-form-item>
        <el-form-item v-if="roleId !== '1476444221949898754'" label-width="55px" label="状态">
          <el-select v-model="queryParams.status" size="mini" clearable placeholder="请选择状态" style="margin: 0 20px 0 -15px;">
            <el-option v-for="(item, index) in statusList" :key="index" :label="item.dictValue" :value="item.dictKey" />
          </el-select>
        </el-form-item>
        <div class="button-style" style="margin-left: auto; width: 90px; margin-top: 6px; background: #f1f8fe; border: 1px solid #51aef6;" @click="handleSearch">
          <img src="@/assets/assessment/icon-search.png" alt="" />
          <span style="font-size: 14px; color: #51aef6;">查询</span>
        </div>
      </el-form>
    </div>
    <div style="margin: 20px 0;">
      <el-table
        border
        :data="tableData"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class">
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <div class="button-style" style="margin-left: auto; width: 75px; margin-top: 6px; background: #fff6ef; border: 1px solid #f3b815;" @click="handleDetail(scope.row)">
              <img src="../../../assets/assessment/y-edit.png" alt=""/>
              <span style="font-size: 14px; color: #f3b815;">详情</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="department" label="系" align="center"></el-table-column>
        <el-table-column prop="teachingandresearchsection" label="教研室" align="center"></el-table-column>
        <el-table-column prop="coursenumber" label="课程编号" align="center"></el-table-column>
        <el-table-column prop="coursename" label="课程名称" align="center"></el-table-column>
        <el-table-column v-if="roleId !== '1476444221949898754'" prop="aaa" label="培养层次" align="center"></el-table-column>
        <el-table-column prop="studytype" label="修习类型" align="center"></el-table-column>
        <el-table-column prop="teachingfaculty" label="授课教员" align="center"></el-table-column>
        <el-table-column prop="grade" label="年级" align="center"></el-table-column>
        <el-table-column prop="classes" label="教学班" align="center"></el-table-column>
        <el-table-column v-if="roleId !== '1476444221949898754'" prop="aaa" label="专业班次" align="center"></el-table-column>
        <el-table-column v-if="roleId !== '1476444221949898754'" prop="aaa" label="教学班人数" align="center"></el-table-column>
        <el-table-column prop="totalnumber" label="总人数" align="center"></el-table-column>
        <el-table-column prop="scoretypecode" label="分制" align="center"></el-table-column>
        <el-table-column prop="usualscorerate" label="课下作业比例" align="center"></el-table-column>
        <el-table-column prop="examscorerate" label="课堂测评比例" align="center"></el-table-column>
        <el-table-column prop="midtermscorerate" label="期中考试比例" align="center"></el-table-column>
        <el-table-column prop="experimentscorerate" label="课终考核比例" align="center"></el-table-column>
        <el-table-column prop="oneticketveto" label="一票否决" align="center"></el-table-column>
      </el-table>
    </div>
    <div class="button-style">
      <img src="@/assets/assessment/icon-export.png" alt="" />
      <download-excel
        :data="tableData"
        :fields="roleId !== '1476444221949898754' ? jsonFields : jsonFields1"
        type="xls"
        name="课程考核实施计划.xls"
        style="font-size: 14px; color: #f3b815;">
        <span>导出Excel</span>
      </download-excel>
    </div>
    <div style="float: right; padding-bottom: 15px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="padding: 0;">
      </el-pagination>
    </div>
    <el-dialog title="课程考核实施计划详情" :visible.sync="dialogShow" width="1500px">
      <el-form class="my-form-container" style="width: 100%; height: 100%;">
        <div style="display: flex;">
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">课程名称</div>
            <span>{{ dialogForm.coursename }}</span>
          </el-form-item>
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">课程编号</div>
            <span>{{ dialogForm.coursenumber }}</span>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">课程类型</div>
            <span>{{ dialogForm.coursetype }}</span>
          </el-form-item>
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">学时</div>
            <span>{{ dialogForm.classhour }}</span>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">学分</div>
            <span>{{ dialogForm.credithour }}</span>
          </el-form-item>
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">培养层次</div>
            <span>{{ dialogForm.traininglevel }}</span>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">分制</div>
            <span>{{ dialogForm.scoretypecode }}</span>
          </el-form-item>
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">课程考核一票否决</div>
            <span>{{ dialogForm.oneticketveto }}</span>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">授课对象</div>
            <span>{{ dialogForm.professionaldivisions }}</span>
          </el-form-item>
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">人数</div>
            <span>{{ dialogForm.classsize }}</span>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">开课教研室</div>
            <span>{{ dialogForm.teachingandresearchsection }}</span>
          </el-form-item>
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">教学班数</div>
            <span>{{ dialogForm.classsize }}</span>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">课程负责人</div>
            <span>{{ dialogForm.coursemanager }}</span>
          </el-form-item>
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">授课教员</div>
            <span>{{ dialogForm.teachingfaculty }}</span>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">课下作业成绩所占比例</div>
            <span>{{ dialogForm.usualscorerate }}</span>
          </el-form-item>
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">课堂测试成绩所占比例</div>
            <span>{{ dialogForm.examscorerate }}</span>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">期中考试成绩所占比例</div>
            <span>{{ dialogForm.midtermscorerate }}</span>
          </el-form-item>
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">期末考试成绩所占比例</div>
            <span>{{ dialogForm.experimentscorerate }}</span>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">期末考试方式</div>
            <span>{{ dialogForm.finalexamination }}</span>
          </el-form-item>
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">场地需求</div>
            <span>{{ dialogForm.situdemand }}</span>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item class="my-form-item" style="width: 100%;">
            <div class="my-form-item-label">考核设计</div>
            <span>{{ dialogForm.assessmentdesign }}</span>
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getStore } from '@/util/store.js'
import { courseGetList } from "../../../api/courseExame/courseExa"
import { reqGetXqList, queryDictByCode, querySemesterByYear, reqCheckYearList, reqCheckLevelList, reqZybcList, querryPlanDetail } from '@/api/admin1/check'
export default {
  data() {
    return {
      roleId: '',
      pageNo: 1,
      pageSize: 10,
      total: 0,
      gradeList: [],
      semesterList: [],
      levelList: [],
      classList: [],
      studyList: [],
      statusList: [],
      dialogShow: false,
      queryParams: {
        termid: "",
        designcontent: undefined,
        studytype: undefined,
        coursename: undefined,
      },
      dialogForm: {

      },
      tableData: [],
      jsonFields: {
        '系': 'department',
        '教研室': 'teachingandresearchsection',
        '课程编号': 'coursenumber',
        '课程名称': 'coursename',
        '培养层次': 'aaa',
        '修习类型': 'studytype',
        '授课教员': 'teachingfaculty',
        '年级': 'grade',
        '教学班': 'classes',
        '专业班次': 'aaa',
        '教学班人数': 'aaa',
        '总人数': 'totalnumber',
        '分制': 'scoretypecode',
        '课下作业比例': 'usualscorerate',
        '课堂测评比例': 'examscorerate',
        '期中考试比例': 'midtermscorerate',
        '课终考核比例': 'experimentscorerate',
        '一票否决': 'oneticketveto'
      },
      jsonFields1: {
        '系': 'department',
        '教研室': 'teachingandresearchsection',
        '课程编号': 'coursenumber',
        '课程名称': 'coursename',
        '修习类型': 'studytype',
        '授课教员': 'teachingfaculty',
        '年级': 'grade',
        '教学班': 'classes',
        '总人数': 'totalnumber',
        '分制': 'scoretypecode',
        '课下作业比例': 'usualscorerate',
        '课堂测评比例': 'examscorerate',
        '期中考试比例': 'midtermscorerate',
        '课终考核比例': 'experimentscorerate',
        '一票否决': 'oneticketveto'
      }
    }
  },
  mounted() {
    const userInfo = getStore({
      name: "userInfo",
      debug: true,
    }) || {}
    this.roleId = userInfo.content.role_id
    reqCheckYearList().then((res) => {
      if (res.data.data && res.data.data.length > 0) {
        this.gradeList = res.data.data
      }
    })
    reqGetXqList().then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.semesterList = res.data.data
      }
    })
    reqCheckLevelList().then(res => {
      if(res.data.data && res.data.data.length > 0){
        this.levelList = res.data.data[0].children
      }
    })
    reqZybcList().then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.classList = res.data.data
      }
    })
    queryDictByCode('xxType').then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.studyList = res.data.data
      }
    })
    queryDictByCode('status').then(res => {
      if (res.data.data && res.data.data.length > 0) {
        this.statusList = res.data.data
      }
    })
    this.handleSearch()
  },
  methods: {
    handleChangeGrade: function (val) {
      this.queryParams.termid = ''
      if (val === '') {
        reqGetXqList().then(res => {
          if (res.data.data && res.data.data.length > 0) {
            this.semesterList = res.data.data
          }
        })
      } else {
        querySemesterByYear(val).then(res => {
          if (res.data.data && res.data.data.length > 0) {
            this.semesterList = res.data.data
          }
        })
      }
    },
    handleSearch() {
      courseGetList(this.queryParams).then(res => {
        this.tableData = res.data.data;
        let data = res.data.data;
        for (let i = 0; i < data.length; i++) {
          this.tableData[i].usualscorerate = data[i].usualscorerate+'%'
          this.tableData[i].examscorerate = data[i].examscorerate+'%'
          this.tableData[i].midtermscorerate = data[i].midtermscorerate+'%'
          this.tableData[i].experimentscorerate = data[i].experimentscorerate+'%'
        }
      })
    },
    handleDetail(row) {
      querryPlanDetail(row.planid).then(res => {
        if (res.data.data) {
          this.dialogForm = res.data.data
          console.log(res.data.data, '111111111111111111111')
        }
      })
      this.dialogShow = true
    },
    handleSizeChange: function (val) {
      this.pageSize = val
      this.handleSearch()
    },
    handleCurrentChange: function (val) {
      this.pageNo = val
      this.handleSearch()
    }
  }
}
</script>
<style lang="less" scoped>
  .button-style {
    float: left;
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: 110px;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;
    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }
  @fontFamily:"Microsoft YaHei";
  .xpaas-table-class {
    border: 1px solid #004ca7;
    border-radius: 9px;
    ::v-deep div.el-table__header-wrapper {
      table.el-table__header {
        thead {
          tr.xpaas-header-row-class {
            padding: 0;
            height: 60px;
            background-color: #edf2f9;
            font-size: 16px;
            font-family: @fontFamily;
            font-weight: bold;
            line-height: 20px;
            color: #004ca7;
            th.xpaas-header-cell-class {
              font-weight: bold;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
    ::v-deep div.el-table__body-wrapper {
      table.el-table__body {
        tbody {
          tr.xpaas-row-class {
            td.xpaas-header-cell-class {
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
            td.xpaas-cell-class {
              height: 60px;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              div.cell {
                font-family: @fontFamily;
                color: #004ca7;
              }
            }

          }
        }
      }
    }
  }
  .my-form-item {
    width: 50%;
    height: 70px;
    border-bottom: 1px solid rgba(0, 76, 167, 0.39);
    margin-bottom: 0;
    > div {
      display: flex;
      height: 100%;
      &:nth-child(2) {
        .my-form-item-label {
          border-left: 1px solid rgba(0, 76, 167, 0.39);
        }
      }
      .my-form-item-label{
        width: 220px;
        background: rgba(0, 76, 167, 0.1);
        display: flex;
        flex: none;
        align-items: center;
        color: #004CA7;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        border-left: 1px solid rgba(0, 76, 167, 0.39);
        margin-left: -1px;
        .mustW {
          color: red;
        }
      }
      span {
        color: #004CA7;
        margin-left: 30px;
        height: 70px;
        line-height: 70px;
      }
    }
  }
  /deep/ .el-form-item__label {
    color: #004ca7;
    font-size: 14px;
  }
  /deep/ .el-dialog {
    margin-top: 3vh !important;
    height: 890px;
    overflow: hidden;
  }
  /deep/ .el-dialog__body {
    padding-top: 5px !important;
  }
</style>
